<!--  -->
<template>
  <div>
    <van-form @submit="changeFromData">
      <div class="font15 mt10 pl10">
        <span class="titletext ">{{ titledata.title }}</span>
        <div class="graytext  mt10 font13">
          <span>工单编号：</span>
          <span class="titletext">{{ titledata.pmInsId }}</span>
        </div>
      </div>
      <div class="font11 mt10 bggray ptandpb10">
        <div class=" graytext pl10">
          <span>申请人：</span>
          <span class="titletext">{{ fromdata.applicant }}</span>
        </div>
        <div class="mt10 graytext pl10">
          <span>拜访申请时间：</span>
          <span class="titletext">{{ fromdata.applyVisitTime }}</span>
        </div>
        <div class="mt10 graytext pl10">
          <span>地市：</span>
          <span class="titletext">{{ fromdata.city }}</span>
        </div>
        <div class="mt10 graytext pl10">
          <span>县区：</span>
          <span class="titletext">{{ fromdata.county }}</span>
        </div>
      </div>
      <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
        <div class="blue_item"></div>
        <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">售前拜访需求-基础信息</span>
      </div>
      <van-field readonly required input-align="left" label-width="4.5em" name="businessId" :value="fromdata.businessId"
        label="商机编号:" />
      <van-field readonly required input-align="left" label-width="4.5em" name="businessName"
        :value="fromdata.businessName" label="商机名称:" />
      <van-field readonly required input-align="left" label-width="6.5em" name="customerName"
        :value="fromdata.customerName" label="集团客户名称:" />
      <van-field readonly required input-align="left" label-width="6.5em" name="customerCode"
        :value="fromdata.customerCode" label="集团客户编码:" />
      <van-field autosize type="textarea" readonly required input-align="left" label-width="4.5em" name="buildContent"
        :value="fromdata.buildContent" label="建设内容:" />
      <!-- <van-field readonly required input-align="left" label-width="4.5em"
                name="visitDate" :value="fromdata.visitDate" label="拜访时间:"
                /> -->
      <van-field readonly required input-align='left' label-width="8.5em" clickable :right-icon="canEdit ? 'arrow' : ''"
        v-model="fromdata.visitDate" label="拜访支撑响应时间:" :value="fromdata.visitDate" placeholder="请选择拜访支撑响应时间"
        @click="canEdit ? showDateDialog('visitDate') : ''" :rules="[{ required: canEdit, message: '' }]" />
      <myvan_field :canEdit='canEdit' :required='true' :name='"visitPeople"' :model='fromdata.visitPeople'
        :label='"拜访对象:"' @freshData='freshData($event)' :placeholder='"请填写拜访对象"' />
      <myvan_field :canEdit='canEdit' :required='true' :name='"visitAddress"' :model='fromdata.visitAddress'
        :label='"拜访地址:"' @freshData='freshData($event)' :placeholder='"请填写拜访地址"' />
      <myvan_field :canEdit='canEdit' :required='true' :type='"tel"' :name='"visitPhone"' :model='fromdata.visitPhone'
        :label='"拜访对象联系方式:"' @freshData='freshData($event)' :placeholder='"请填写联系方式"' />
      <myvan_field :canEdit='canEdit' :type='"textarea"' :name='"visitDescription"' :model='fromdata.visitDescription'
        :label='"拜访内容:"' @freshData='freshData($event)' />
      <!-- <van-field readonly required input-align="left" label-width="4.5em"
                name="visitPeople" :value="fromdata.visitPeople" label="拜访对象:"
                 />
        <van-field readonly required input-align="left" label-width="4.5em"
                name="visitAddress" :value="fromdata.visitAddress" label="拜访地址:"
                />
        <van-field readonly required input-align="left" label-width="8.5em"
                name="visitPhone" :value="fromdata.visitPhone" label="拜访对象联系方式:"
                 />
        <van-field readonly input-align="left" label-width="4.5em"
                name="visitDescription" :value="fromdata.visitDescription" label="拜访内容:"
                /> -->

      <div v-if="!canEdit" class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
        <div class="blue_item"></div>
        <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">承办</span>
      </div>
      <div v-if="!canEdit">
        <van-field rows="1" autosize type="textarea" v-model="fromdata.undertakeOpinion"
          :right-icon="canFromEdit ? 'arrow' : ''" label-width="6.5em" :readonly="!canFromEdit" label="可研方案建议:"
          :value="fromdata.undertakeOpinion" placeholder="请填写可研方案建议" :show-word-limit="canFromEdit" maxlength="100"
          name="undertakeOpinion" />
        <van-field readonly required input-align='left' label-width="8.5em" clickable
          :right-icon="canFromEdit ? 'arrow' : ''" v-model="fromdata.visitReplyTime" label="拜访支撑响应时间:"
          :value="fromdata.visitReplyTime" placeholder="请选择拜访支撑响应时间"
          @click="canFromEdit ? showDateDialog('visitReplyTime') : ''" />

      </div>
      <van-popup v-model="showtimedialog" position="bottom">
        <van-datetime-picker :formatter="formatter" type="datetime" v-model="nowDate" :min-date="strDate"
          :max-date="maxDate" @cancel="showtimedialog = false" @confirm="showtimedialogcomfirm" />
      </van-popup>
      <div v-if="!isdrawType" class="left_botton">
        <button block type="button" @click="tomsg()" style="color:#60a9ec; display: inline-block;width:100%;border: 0px solid #60a9ec;border-radius: 15px 0px 0px 15px;
            padding:10px 10px 10px 15px;font-size:13px">意见</button>
      </div>
      <div v-if="isdrawType" style="padding-bottom: 42px"></div>
      <div v-if="todotype || toread || isdrawType" class="footer">
        <van-button block type="info" native-type="submit" :disabled="canToNext == true ? false : true"
          style="display: inline-block;width:100%;border: 0px solid #60a9ec;">{{ toNextValue }}</van-button>
      </div>
    </van-form>
    <div v-if="showHistory" class="spline"></div>
    <van-field readonly center v-if="showHistory" label="当前办理人:" label-width="5.5em" />
    <div v-if="showHistory" class="font13 ptandpb10 pl16">
      <div>
        <span class="titletext font13">{{ historydata.MANAGER }}</span>
      </div>
      <div class="mt5">
        <span class="graytext font12 ">{{ historydata.DEPARTMENT }}</span>
      </div>
    </div>
    <div class="spline"></div>
    <div v-if="!isdrawType" style="padding-bottom: 42px">
      <div class="stitle font14" id='target'>审批意见</div>
      <div v-if="approveList.length > 0" class="swrap" style="width: 100%">
        <div class="spiece_flex" v-for="(item, index) in approveList" :key="index">
          <div class="vertical-a-t display-ib" style="width: 25px">
            <i v-if="index == 0" class="iconfont icon-current font16 color-red2"></i>
            <i v-if="index > 0" class="iconfont icon-yiban font16 color-theme"></i>
            <div v-if="index != (approveList.length - 1)" class="optionline"></div>
          </div>
          <div class="vertical-a-t display-ib" style="width: calc(100%)">
            <div style="white-space: nowrap">
              <span class="color-theme font14">{{ item.producerName || "暂无" }}：</span>
              <span class="color-2 font14">{{
      item.content || "暂无"
    }}</span>
            </div>
            <div class="mt05 color-8" style="display: flex; align-items: baseline">
              <div class="display-ib vertical-a-t font12" style="margin-top: 2px;width: 100%">
                {{ item.companyName + '-' + item.departmentName || "暂无" }}
              </div>
              <div class="display-ib vertical-a-t font12 text-r"
                style="margin-left: 10px; margin-top: 2px;text-align: right;width: 100%">
                {{ item.modifiedTime || "暂无" }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <div class="color-9 font12 text-c">暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getFormDetail, getBusinessVisitByPmInsId,
  getWfOptMags, getWfLinkTracks
} from '@/api/dictapi'
import { mapGetters } from "vuex"
import { Notify, Dialog, Toast } from 'vant'
import moment from 'moment'
import util from "@/assets/js/public";
import myvan_field from '@/components/myvanfield';


export default {
  components: {
    myvan_field
  },
  data() {
    return {
      titledata: {
      },
      fromdata: {
      },
      canFromEdit: false,
      params: this.$route.query,
      todotype: false,
      approveList: [],
      showHistory: false,
      historydata: {},
      toread: false,
      showtimedialog: false,
      nowDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), new Date().getHours(), new Date().getMinutes()),
      strDate: new Date(new Date().getFullYear() - 10, new Date().getMonth(), new Date().getDate()),
      maxDate: new Date(new Date().getFullYear() + 10, new Date().getMonth(), new Date().getDate()),
      toNextValue: '流转下一步',
      canToNext: true,
      canEdit: false,
      showDateTye: '',
      isdrawType: false,
    }
  },
  computed: {
    ...mapGetters(['user']),
    ...mapGetters(['userinfo'])
  },
  //生命周期--创建完成
  created() {
    console.log('todoType2:' + this.params.workItemId)
    console.log('用户信息', JSON.stringify(this.userinfo))
    if (this.params.isdraw == '1') {
      this.todotype = true;
      this.canEdit = true
      this.isdrawType = true
      this.fromdata.businessId = this.params.creatDatas.businessId
      this.fromdata.businessName = this.params.creatDatas.businessName
      this.fromdata.customerName = this.params.creatDatas.customerName
      this.fromdata.customerCode = this.params.creatDatas.groupId
      this.fromdata.buildContent = this.params.creatDatas.buildContent
      this.fromdata.applicant = this.userinfo.truename
      this.fromdata.applyVisitTime = moment(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), new Date().getHours(), new Date().getMinutes())).format('YYYY-MM-DD HH:mm:ss')
      this.fromdata.city = this.userinfo.belongCompanyName
      this.fromdata.county = this.userinfo.belongDepartmentName
    } else if (this.params.todoType == '1') {
      this.todotype = true;
      if (this.params.location == 'dict.startToSolutionManager') {
        this.canFromEdit = true
      }
      if (this.params.location == 'dict.start') {
        console.log("canToNext是1111111111111111111");
        this.canEdit = true
        // this.canToNext=false
        // this.toNextValue='暂不支持该环节,请至PC端办理'
      } else {
        console.log("canToNext是222222222222222222");
        this.canToNext = true
        this.toNextValue = '流转下一步'
      }
      this.getdetail();
    } else if (this.params.todoType == '2') {
      this.showHistory = true;
      this.getdetail();
    } else if (this.params.todoType == '3') {
      this.toread = true;
      this.getdetail();
    }

  },
  //生命周期--挂载完成
  mounted() {

  },
  //方法调用
  methods: {
    freshData(value) {
      console.log("W" + value.name + "E" + value.data)
      this.fromdata[value.name] = value.data
    },
    tomsg() {
      document.getElementById('target').scrollIntoView({ behavior: 'smooth' })
    },
    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`;
      } else if (type === 'month') {
        return `${val}月`;
      } else if (type === 'day') {
        return `${val}日`;
      } else if (type === 'hour') {
        return `${val}时`;
      } else if (type === 'minute') {
        return `${val}分`;
      }
      return val;
    },
    showDateDialog(value) {
      this.showDateTye = value
      this.showtimedialog = true
    },
    showtimedialogcomfirm(value) {
      this.showtimedialog = false;
      this.fromdata[this.showDateTye] = moment(value).format('YYYY-MM-DD HH:mm:ss')
    },
    getdetail() {
      Toast.loading({
        message: '加载中',
        forbidClick: false
      });
      getFormDetail(Object.assign(this.params, { userName: this.user.userName }))
        .then((result) => {
          this.fromdetal = {};
          Toast.clear();
          if (!result.data) {
            Notify(result.message);
            return;
          }
          if (result.data.data) {
            this.titledata = result.data.data;
          }
          this.getBusinessVisitByPmInsId();
        })
    },
    getBusinessVisitByPmInsId() {
      getBusinessVisitByPmInsId(Object.assign(this.params, { userName: this.user.userName }))
        .then((result) => {
          this.fromdetal = {};
          Toast.clear();
          if (!result.data) {
            Notify(result.message);
            return;
          }
          if (result.data.data) {
            this.fromdata = result.data.data;
            if (!this.fromdata.visitReplyTime) {
              this.fromdata.visitReplyTime = moment(this.nowDate).format('YYYY-MM-DD HH:mm:ss')
            }
          }
          this.getWfOptMags();
        })
    },
    getWfOptMags() {
      getWfOptMags(Object.assign(this.params), { userName: this.user.userName })
        .then((result) => {
          Toast.clear();
          if (!result.data) {
            Notify(result.message);
            return;
          }
          this.approveList = result.data.data.reverse();
          console.log('this.showHistory222', this.showHistory)
          if (this.showHistory == true) {
            this.getWfLinkTracks()
          }
        })
    },
    getWfLinkTracks() {
      getWfLinkTracks(Object.assign(this.params), { userName: this.user.userName })
        .then((result) => {
          Toast.clear();
          if (!result.data) {
            Notify(result.message);
            return;
          }
          if (result.data.data) {
            //数据过滤，并生成新的数组
            this.historydata = result.data.data.filter(item => item.CURRENTSTATE == 10)[0]
            if (this.historydata) {
              if (this.historydata.MANAGER) {
                this.showHistory = true;
              } else {
                this.showHistory = false;
              }
            } else {
              this.showHistory = false;
            }
          } else {
            this.showHistory = false;
          }
        })
    },



    changeFromData() {

      this.controlRule(this.params, this.fromdata.businessId, this.toNext);
    },

    toNext() {

      // 提交流转
      const phonePass = this.newUtils.isPhoneNumber(this.fromdata.visitPhone)
      if (!phonePass) return;
      console.log("提交流转提交流转提交流转提交流转提交流转");
      console.log("formDataformData", JSON.stringify(this.fromdata));
      var formSendData = { "htmlParamMap": {} };
      formSendData.htmlParamMap = this.fromdata;
      formSendData.id = this.titledata.id;
      formSendData.pmInsId = this.titledata.pmInsId;
      formSendData.processType = 'SQBF'
      formSendData.workItemId = this.params.workItemId;
      this.params.pmInsType = 'SQBF'
      console.log("传给递交页面:", this.params)
      var params1 = {
        kv: {
          currentUserCode: util.encrypt(this.user.userName),
          source: 'MOBILE',
          location: this.params.location,
          processInstId: this.params.processInstId,
          processDefName: this.params.processDefName,
          processType: 'SQBF',
        },
      };
      var params2 = {
        kv: {
          "currentUserCode": util.encrypt(this.user.userName),
          "source": 'MOBILE',
          "location": this.params.location,
          "processInstId": this.params.processInstId,
          'processType': 'SQBF',
          'receiptCode': this.params.processInstId
        },
      };
      var params3 = {
        kv: {
          "source": 'MOBILE',
          "currentUserCode": util.encrypt(this.user.userName),
          "workItemId": this.params.todoType == 3 ? "" : this.params.workItemId,
          "processInstId": this.params.processInstId,
          "location": this.params.location,
          "notificationId": this.params.todoType == 3 ? this.params.wfnid : ""
        },
      };

      localStorage.setItem('submitPageParam', JSON.stringify({
        getDecisionsUrl: 'decisionAndUser$api$getDecisions',
        getDecisionsParams: params1,
        getUserUrl: 'decisionAndUser$api$getOrgAndUser',
        getUserParams: params2,
        tosubmintUrl: 'applicationFormEnhance$api$startSubmitProcess',
        tosubmintParams: params3,
        formData: formSendData,
        fromMoa: this.params.fromMoa,
        type: this.params.todoType == 3 ? "toRead" : "toDo"
      }));

      this.$router.push( {
        
          name: 'srqrsubmit'
        }
      );
    }







  }
}
</script>
<style scoped>
/* @import url();*/
</style>